<!-- 通知公告 -->
<template>
  <div>
    <van-pull-refresh v-model="isreFreshLoading"
                      @refresh="onRefresh"
                      :success-duration="500"
                      :success-text='`刷新成功，加载${items.length} 条记录`'>
      <van-list v-model:loading="loading"
                v-model:error="error"
                :finished="finished"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="load">
        <template v-for="(item, index) in items"
                  :key="index">
          <div class="report-date">{{item.date}}</div>
          <list-card v-for="(report, queue) in item.node"
                     :key="queue"
                     :title="report.title"
                     :leftIconSrc="report.icon"
                     :rightDescription="report.time"
                     rdColor="#999999"
                     linked
                     :to="{ path: '/messageReportDetail', query: {id: 1} }">
            <template #content>
              <span>{{report.content}}</span>
            </template>

          </list-card>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ListCard from '@/components/ListCard.vue'
import { usePullRefresh } from '@/hooks/usePullRefresh.js'
import { reactive, ref, onMounted, toRefs, onActivated } from 'vue'
import { getReport } from "@/api/request/basic"

export default {
  components: {
    ListCard
  },
  setup () {
    const { state, load, onRefresh, initPullRefresh } = usePullRefresh()
    onMounted(() => {
      initPullRefresh({ request: getReport })
      load()
    })
    return {
      load,
      onRefresh,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>
.ep-card-left-icon {
  align-self: flex-start;
}

.report-date {
  text-align: center;
  background: #f7f7f7;
  color: #969799;
  line-height: 33px;
}
</style>